<template>
  <div class="type">
    <div class="content-top">
      <span>排班管理</span>
    </div>
    <!--左边二级侧边栏-->
    <div class="content-left active">
      <div class="menu-item">
        <router-link to="/rest/type">时长类型管理</router-link>
      </div>
      <div class="menu-item">
        <router-link to="/rest/duration">员工时长管理</router-link>
      </div>
      <div class="menu-item">
        <router-link to="/rest/overtime">员工加班时长调整</router-link>
      </div>
    </div>
    <!--右边内容-->
    <div class="content-right active">
      <div class="content-head">
        <div class="input-item fl flex flex-y-center">
          <span class="span-title fl">类型：</span>
          <span class="span-input fl"
            ><el-input
              v-model="params.typeName"
              placeholder="请输入类型"
            ></el-input
          ></span>
        </div>
        <div class="input-item fl">
          <span class="span-input fl">
            <el-button
              type="primary"
              @click="
                () => {
                  ;(pparams = Object.assign(
                    {pageNum: 1, pageSize: 15},
                    params,
                  )),
                    FnSearch()
                }
              "
              >查询</el-button
            >
          </span>
        </div>
        <div class="input-item fr">
          <span class="span-input fl">
            <el-button
              style="background-color: #9c0; color: #fff;"
              @click="FnAdd"
              >添加</el-button
            >
          </span>
        </div>
      </div>
      <div class="content-table">
        <div
          v-for="item in tableData"
          :key="item.id"
          class="table-item flex flex-y-center"
        >
          <span class="flex1">类型</span>
          <span class="flex1">{{ item.typeName }}</span>
          <span class="flex1 flex flex-x-center"
            ><span @click="FnDelete(item)">删除</span></span
          >
        </div>
      </div>
      <div class="page">
        <el-pagination
          :current-page="pparams.pageNum"
          :page-sizes="[15, 50, 100, 200, 500, 1000, 5000, 10000, 50000]"
          :page-size="params.pageSize"
          :total="count"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="
            e => {
              pparams.pageNum = 1
              pparams.pageSize = e
              FnSearch()
            }
          "
          @current-change="
            e => {
              pparams.pageNum = e
              FnSearch()
            }
          "
        />
      </div>
    </div>
    <!--各种弹窗-->
    <Vmask :mask="mask" @FnMask="FnMask" />
  </div>
</template>
<script>
import Vmask from '@/components/vmask.vue'
import {leaveType} from '@/const/api'

export default {
  name: 'Type',
  components: {
    Vmask,
  },
  data() {
    return {
      activeName: '1',
      params: {
        typeName: null,
      },
      pparams: {
        pageSize: 15,
        pageNum: 1,
      },
      tableData: [],
      count: 0,
      mask: {
        title: '',
        showMask: false,
        form: [
          {
            title: '类型',
            width: '',
            type: 'text',
            name: 'typeName',
            value: '',
            default: '',
            placeholder: '请填写类型',
            disabled: false,
            required: true,
          },
          {
            title: '备注',
            width: '',
            type: 'textarea',
            name: 'remark',
            value: '',
            default: '',
            placeholder: '请填写备注',
            disabled: false,
            required: false,
            rows: 3,
          },
        ],
        width: '28%',
        btnLoading: false,
      },
      timeStart: new Date(),
    }
  },
  created() {
    window._this = this

    this.FnSearch()
  },
  methods: {
    async FnSearch() {
      let params = this.pparams
      let {state, count, msg, data} = await this.$axios.$get(
        leaveType('selectAll'),
        {params: params},
      )
      if (state == this.ResCode) {
        this.tableData = data
        this.count = count
      } else {
        this.$Message.error(msg)
      }
    },
    FnMask(e) {
      console.log(e, 'e')
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask = this.mask

      let timeStart = this.timeStart
      let timeEnd = new Date()

      if (timeEnd - timeStart >= 1500) {
        if (type == 'cancel') {
          mask.showMask = false
        } else if (type == 'leaveType') {
          this.$utils
            .maskForm(mask.form)
            .then(async res => {
              let responent
              mask.btnLoading = true
              if (mask.id) {
                res.id = mask.id
                responent = await this.$axios.$get(
                  leaveType('insertLeaveType'),
                  {params: res},
                )
              } else {
                responent = await this.$axios.$get(
                  leaveType('insertLeaveType'),
                  {params: res},
                )
              }
              mask.btnLoading = false
              mask.showMask = false
              this.$utils.clearForm(mask.form)
              if (responent.state == this.ResCode) {
                !mask.id
                  ? this.$Message.success('保存成功')
                  : this.$Message.success('修改成功')
                setTimeout(() => {
                  this.FnSearch()
                }, 100)
              } else {
                this.$Message.error(responent.msg)
              }
            })
            .catch(err => {
              this.$Message.error(err)
            })
        }
        this.timeStart = timeEnd
      }
    },
    FnAdd() {
      this.mask.showMask = true
      this.mask.id = null
      this.mask.title = '添加类型'
      this.mask.leaveType = true
    },
    FnDelete(content) {
      const h = this.$createElement
      this.$msgbox({
        title: '删除提示',
        message: h('p', null, [
          h('span', null, '你确定删除该记录吗？'),
          h('i', {style: 'color: teal; fontStyle: normal'}, content.typeName),
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '删除中...'
            this.$axios
              .$get(leaveType('deleteLeaveType'), {params: {id: content.id}})
              .then(res => {
                if (res.state == this.ResCode) {
                  this.$Message.success('删除成功')
                  setTimeout(() => {
                    this.FnSearch()
                  }, 100)
                } else {
                  this.$Message.error(res.msg)
                }
                done()
                instance.confirmButtonLoading = false
                instance.confirmButtonText = '确定'
              })
          } else {
            done()
          }
        },
      }).then(action => {})
    },
  },
}
</script>

<style lang="less">
.type {
  .content-content-right {
    min-height: calc(100vh - 60px - 50.8px - 60px);
  }

  .content-content-top {
    padding-top: 14px;
    font-weight: bold;
  }

  .content-right {
    max-width: 550px;
  }

  .content-table {
    .table-item {
      height: 50px;
      border-bottom: 1px solid #c1c1c1;

      span {
        font-size: 15px;

        &:nth-child(2) {
          color: rgb(0, 102, 225);
        }

        &:last-child {
          font-size: 14px;
          color: rgb(97, 167, 224);
          cursor: pointer;

          & > span:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }

  .page {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}
</style>
